<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <div>
        <!-- <el-form-item label="关键字">
          <el-input v-model="listQuery.fbillno" clearable class="filter-item" style="width: 180px"
            placeholder="请输入关键字" />
        </el-form-item> -->
        <el-form-item label="预约日期">
        <el-date-picker
          v-model="alarmdate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="会议室">
          <el-select v-model="listQuery.roomId" class="filter-item" clearable placeholder="请选择会议室">
            <el-option v-for="item in getListfpointNo" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="listQuery.ftaskno" clearable filterable class="filter-item" placeholder="请选择部门">
            <el-option v-for="item in listtsTaskList" :key="item.ftaskno" :label="item.ftaskname" :value="item.ftaskno" />
          </el-select>
        </el-form-item>
        <el-form-item label="预约人员">
          <div style="display:flex;justify-content:flex-start;align-items:center">
            <el-select style="display: inline-block" clearable filterable v-model="listQuery.speakerId"
              class="filter-item" placeholder="请选择预约人员">
              <el-option v-for="item in getListSpeakerId" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <i class="el-icon-search selectI" @click="searchDialoguse('search')" />
          </div>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="预约状态">
          <el-select v-model="listQuery.meetingType" class="filter-item" clearable placeholder="请选择预约状态">
            <el-option v-for="item in meetingTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 66px">
          <el-button round size="medium" class="filter-item"
            :style="{ background: buttonColor.lookup, color: buttonColor.color }" @click="handleFilter">查找</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!-- 查询结果 -->
    <el-table :height="buttonColor.clientHeight" v-loading="listLoading" :data="list" stripe
      element-loading-text="正在查询中。。。" border fit highlight-current-row :header-cell-style="tableColor">
      <el-table-column :width="buttonColor.operationThree" align="center" label="操作" class-name="small-padding">
        <template slot-scope="scope">
          <div class="operationButton">
            <div
              :style="{ color:buttonColor.edit, cursor: 'pointer' }" @click="look(scope.row)">
              <img src="../../../public/images/look.png" />
              预览
            </div>
            <!-- <div v-if="scope.row.checkedState == 0"
              :style="{ color:buttonColor.edit, cursor: 'pointer' }" @click="modify(scope.row)">
              <img src="../../../public/images/edit.png" />
              修改
            </div>
            <div v-else
              :style="{ color:buttonColor.edit, cursor: 'pointer' }">
              <img src="../../../public/images/edit.png" />
              修改
            </div> -->
            <div v-if="scope.row.checkedState == 0" :style="{ color:buttonColor.examine, cursor: 'pointer' }" @click="audit(scope.row)">
              <img src="../../../public/images/examine.png" />
              确定
            </div>
            <div v-else :style="{ color:buttonColor.examine, cursor: 'pointer' }">
              <img src="../../../public/images/examine.png" />
              确定
            </div>
            <div v-if="scope.row.checkedState == 0" :style="{ color:buttonColor.delete, cursor: 'pointer' }" @click="cancel(scope.row)">
              <img src="../../../public/images/del.png" />
              驳回
            </div>
            <div v-else :style="{ color:buttonColor.delete, cursor: 'pointer' }">
              <img src="../../../public/images/del.png" />
              驳回
            </div>

          </div>
        </template>
      </el-table-column>
      <el-table-column
        :width="buttonColor.line"
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column :width="buttonColor.billno" align="left" label="单号" prop="id" />
      <el-table-column width="220" align="left" label="主题" prop="subject" />
      <el-table-column width="120" align="left" label="预约人员" prop="speaker" />
      <el-table-column align="left" label="会议室" prop="roomName" />
      <el-table-column :formatter="ftasknoFormat" align="left" label="部门" prop="ftaskno" />
      <el-table-column :width="buttonColor.state" align="left" label="审核状态" prop="checkedState">
        <template slot-scope="scope">
          <span v-if="scope.row.checkedState === 0" :style="{ color: buttonColor.order }">{{ scope.row.checkedState |
          statusFilter
          }}</span>
          <span :style="{ color: buttonColor.approval }" v-else-if="scope.row.checkedState === 1">{{
          scope.row.checkedState | statusFilter
          }}</span>
          <span :style="{ color: buttonColor.rcancel }" type="info" v-else>{{
          scope.row.checkedState | statusFilter
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :width="buttonColor.state" align="left" label="预约状态" prop="meetingType">
        <template slot-scope="scope">
          <span v-if="scope.row.meetingType == 0" :style="{ color: buttonColor.order }">{{ scope.row.meetingType |
          meetingstatusFilter
          }}</span>
          <span :style="{ color: buttonColor.approval }" v-else-if="scope.row.meetingType == 1">{{
          scope.row.meetingType | meetingstatusFilter
          }}</span>
          <span :style="{ color: buttonColor.approval }" v-else-if="scope.row.meetingType == 2">{{
          scope.row.meetingType | meetingstatusFilter
          }}</span>
          <span :style="{ color: buttonColor.rcancel }" type="info" v-else>{{
          scope.row.meetingType | meetingstatusFilter
          }}</span>
        </template>
      </el-table-column>
      <el-table-column width="220" align="left" label="开始/结束时间" prop="time" />
      <el-table-column width="200" align="left" label="备注" prop="memo" />
      <el-table-column width="200" align="left" label="驳回原因" prop="reason" />
    </el-table>

    <!--修改预约预览弹窗-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 预约 -->
   <el-dialog
      width="auto"
      top="0vh"
      :close-on-click-modal="false"
      :visible.sync="rejectedVisible"
    >
    <template slot="title">
      <div :style="titleColor">驳回弹窗</div>
    </template>
      <div style="font-size: 16px">
        会议室: {{this.dataForm.roomName}}
      </div>
      <div style="font-size: 16px;margin: 10px 0;">
        时间：{{this.dataForm.time}}
      </div>
      <el-form
        status-icon
        label-position="left"
        label-width="auto"
      >
          <el-form-item class="required" label="驳回原因" prop="rejectedText">
            <el-input
              v-model="rejectedText"
              :rows="5"
              type="textarea"
            />
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button round :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="rejectedVisible = false">取消</el-button>
        <el-button round :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="rejectedClick()">确定</el-button>
      </div>
    </el-dialog>

    <!--修改预约延时弹窗-->
    <div class="divfixed" v-if="fixedstatus==1" @click="closediv">
    </div>
    <div class="divabsolute" v-if="divconfirm==1">
      <div class="divtitle" style="">
        修改时间
      </div>
      <span class="spanclose" style="" @click="closediv">X</span>
      <!--内容start-->
      <div class="divconnect">
        <p style="color:black">会议室名称：{{itemvalue.roomName}}</p>
        <p style="color:black">预约时间：{{itemvalue.time}}</p>
        <div style="color:black">
          <p>延长时间(分钟)：</p>
          <label v-for="(item, index) in radioData" :key="index" style="color:#0075ff;margin-right:10px;">
            <input type="radio" v-model="selectradioVal" :value="item.value" @change="selectdate" />
            {{ item.value }}
          </label>
          <div
            style="display: flex;padding:40px 20px 10px 20px;width:60%;margin:0 auto;justify-content:space-between;cursor: pointer;">
            <span style="padding: 8px 30px 8px 30px;border: 1px solid #d5d5d3;border-radius: 5px;font-size: 15px;"
              @click="closediv">取消</span>
            <span
              style="padding: 8px 30px 8px 30px;background-color: rgb(0 142 255);border-radius: 5px;font-size: 15px;color: white;"
              @click="dateconfirm">确定</span>
          </div>
        </div>
      </div>
      <!--内容end-->
    </div>
     <!--修改预约延时弹窗-->
<!--修改预约预览弹窗-->
<div class="divfixed" v-if="fixedstatuslook==1" @click="closedivlook">
    </div>
    <div class="divabsolute" v-if="divconfirmlook==1">
      <div class="divtitle" style="">
        查看详情
      </div>
      <span class="spanclose" style="" @click="closedivlook">X</span>
      <!--内容start-->
      <div class="divconnect">
        <p style="color:black">单号：{{itemvaluelook.id}}</p>
        <p style="color:black">会议室：{{itemvaluelook.roomName}}</p>
        <p style="color:black">预约时间：{{itemvaluelook.time}}</p>
        <div style="color:black">
          <p>签到记录:</p>
          <div style="background: #9e9e9e2e;padding: 5px 5px;font-weight: 600;font-size: 14px;">
            <span  style="width:30%;display:inline-block;">用户名</span>
             <span style="width:30%;display:inline-block">签到状态</span>
             <span style="width:30%;display:inline-block">签到时间</span>
          </div>
          <div v-for="(item,index) in itemvaluelook.attendances" :key="index" style="padding: 5px 5px;font-size: 14px;border-bottom: 1px solid #9e9e9e2e;">
            <span  style="width:30%;display:inline-block">{{item.name}}</span>
             <span style="width:30%;display:inline-block">{{item.isSigned==0?'未签到':'已签到'}}</span>
             <span style="width:30%;display:inline-block" v-if="item.isSigned==1">{{item.signTime}}</span>
             <span style="width:30%;display:inline-block" v-if="item.isSigned==0">--</span>
          </div>
          <div style="margin-top:15px;font-size:12px">
            <p>提示：</p>
            <p>1、预约开始时间前5分钟会开启设备，结束后5分钟会关闭设备;</p>
            <p>2、取消预约在预约结束前20分钟前取消，申请取消管理员会审核;</p></div>
        </div>
      </div>
      <!--内容end-->
    </div>

    <userDialog :searchVisibleuse.sync="searchVisibleuse" :fsiteNo.sync="userDialogFsiteNo" :tableColor="tableColor"
      @userDialog="userDialogValue" />
  </div>

</template>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px
}

.divfixed {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(1, 1, 1, 0.5);
  top: 0;
  left: 0;
  z-index: 10000;
  cursor: pointer;
}

.divabsolute {
  position: absolute;
  width: 500px;
  /*height: 300px;*/
  background: rgba(255, 255, 255, 1);
  top: 50%;
  left: 50%;
  z-index: 100;
  margin-left: -250px;
  margin-top: -150px;
  z-index: 10001;
  border-radius: 3px;
}

.divtitle {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  border: 1px solid #b0becb;
}

.spanclose {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: #8d8d8d;
  border: 1px solid #8d8d8d;
  border-radius: 50px;
  margin: 15px 10px 0 0;
  cursor: pointer;
}

.divconnect {
  padding: 10px 15px 10px 15px;
}
</style>

<script>
import { listBooking, cancelMeeting, Meetingupdate, statusUpdate } from "@/api/meetingManage";
import { listtsTask } from '@/api/labOrder/teamTask'
import { getListArea} from "@/api/area";
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor, titleColor, buttonColor } from "@/filters/index";
import UserDialog from '@/components/UserDialog'

const statusMap = {
  0: "未审核",
  1: "已通过",
  2: "已驳回",
};
const meetingstatusMap = {
  0: "未开始",
  1: "进行中",
  2: "已取消",
  3: "已结束",
};

export default {
  name: "meetingManage",
  components: {
    Pagination,
    UserDialog
  },
  filters: {
    statusFilter(type) {
      return statusMap[type];
    },
    meetingstatusFilter(type) {
      return meetingstatusMap[type];
    },
  },
  data() {
    return {
      userFlag: null, // 判断人员是搜索还是添加
      searchVisibleuse: false, // 是否显示人员弹窗
      userDialogFsiteNo: null, // 客户编号(人员弹出框)
      meetingTypeOptions: [
        { value: '0',label: '未开始'},
        { value: '1',label: '进行中'},
        { value: '2',label: '已取消'},
        { value: '3',label: '已结束'},
      ],
      getListSpeakerId: [], // 人员
      alarmdate: null,
      listtsTaskList: [],
      rejectedText: '', // 驳回原因
      rejectedVisible: false, // 驳回弹窗
      getListfpointNo: [],
      buttonColor: buttonColor,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        minTime: undefined,
        maxTime: undefined,
        fuseuser: undefined,
        fusedate: undefined,
        fplanusedate: undefined,
        ftakedateStart: undefined,
        checkedState: undefined,
        roomId: undefined,
        ftaskno: undefined,
        speakerId: undefined,
        meetingType: undefined,
        sort: "create_time",
        order: "desc",
      },
      dataForm: {
        fbillno: undefined,
        fsiteNo: undefined,
        fuseuser: undefined,
        fusedate: undefined,
        fplanusedate: undefined,
        fpointNo: undefined,
        fmancount: undefined,
        fplanbegtime: undefined,
        fplanendtime: undefined,
        frealbegtime: undefined,
        frealendtime: undefined,
        fexplanation: undefined,
        checkedState: undefined,
        id: undefined,
        details: [],
      },
      tableColor: tableColor,
      titleColor: titleColor,
      fbillstateOptions: [
        { value: 0, label: "未审核" },
        { value: 1, label: "已通过" },
        { value: 2, label: "已驳回" },
      ],
      fixedstatuslook: 0, //灰色背景 预览
      divconfirmlook: 0,  //中间内容 预览
      itemvaluelook: {},  //修改获取值 预览
      fixedstatus: 0, //灰色背景
      divconfirm: 0,  //中间内容
      itemvalue: {},  //修改获取值
      radioData: [
        { value: '15' },
        { value: '30' },
        { value: '45' },
        { value: '60' },
      ],
      selectradioVal: '15' // 用于设置默认选中项
    };
  },
  created() {
    this.getList();
    this.alarmdate = [
      this.parserDate(moment(new Date().setDate(1)).format("YYYY-MM-DD")),
      new Date(),
    ];
    // 地点
    getListArea({ flag: 10, arg1: this.$store.state.user.fsiteNo })
      .then((response) => {
        this.getListfpointNo = response.data.data.list;
      })
      .catch(() => {
        this.getListfpointNo = [];
      });
      // 部门
      listtsTask({limit: -1})
        .then(response => {
          this.listtsTaskList = response.data.data.list
        })
        .catch(() => {
          this.listtsTaskList = []
        })
        // 人员
    getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo })
      .then((response) => {
        this.getListSpeakerId = response.data.data.list;
      })
      .catch(() => {
        this.getListSpeakerId = [];
      });
  },
  methods: {
    // 日期格式化
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
    ftasknoFormat: function (row, column) {
      console.log('this.listtsTaskList',this.listtsTaskList)
      if (this.listtsTaskList) {
        for (let i = 0; i < this.listtsTaskList.length; i++) {
          if (row.ftaskno == this.listtsTaskList[i].ftaskno) {
            return this.listtsTaskList[i].ftaskname
          }
        }
        return ''
      } else {
        return ''
      }
    },
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    timeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    formatDate: function (date) {
      if (typeof date === "object") {
        var ym;
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m < 10) {
          m = "0" + m;
        }
        if (d < 10) {
          d = "0" + d;
        }
        ym = "" + y + m + d;
        return ym;
      } else {
        return date;
      }
    },
    // 搜索人员弹出框
    searchDialoguse(value) {
      this.userFlag = value
      if (value === 'add') {
        this.userDialogFsiteNo = this.dataForm.fsiteNo
      } else {
        this.userDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisibleuse = true
    },

    // 人员弹出框返回值
    userDialogValue(value) {
      console.log('value', value);
      if (this.userFlag === 'add') {
      } else {
        this.listQuery.speakerId = value.user.id.toString()
      }
    },
    getList() {
      this.listQuery.minTime =
        this.alarmdate == null ? null : this.formatDate(this.alarmdate[0]);
      this.listQuery.maxTime =
        this.alarmdate == null ? null : this.formatDate(this.alarmdate[1]);
      this.listLoading = true;
      listBooking(this.listQuery).then((response) => {
        response.data.data.list.forEach((item) => {
          let begin = moment(item.beginTime).format("YYYY-MM-DD HH:mm")
          let end = moment(item.endTime).format("HH:mm")
          item.time = begin + '~' + end
        })
        this.list = response.data.data.list;
        this.total = response.data.data.total;
        this.listLoading = false;
      })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    cancel(row) {
      this.dataForm = Object.assign({}, row);
      this.rejectedText = ''
      this.rejectedVisible = true
      // const h = this.$createElement
      // this.$confirm('提示', {
      //   title: '提示',
      //   message: h('div', [h('p', '是否驳回会议室：' + item.roomName), h('p', '时间：' + item.time)]),
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   statusUpdate({
      //     meetingId: this.dataForm.id,
      //     type: 2,
      //   })
      //     .then((response) => {
      //       for (const v of this.list) {
      //         if (v.id === this.dataForm.id) {
      //           const index = this.list.indexOf(v);
      //           this.list.splice(index, 1, this.dataForm);
      //           break;
      //         }
      //       }
      //       this.$notify.success({
      //         title: '成功',
      //         message: response.data.data
      //       })
      //     })
      //     .catch(() => {
      //       this.$notify.error({
      //         title: '失败',
      //         message: '取消失败'
      //       })
      //     });
      // })
    },
    rejectedClick(){
      if(this.rejectedText){
        statusUpdate({
          meetingId: this.dataForm.id,
          type: 2,
          reason: this.rejectedText
        })
          .then((response) => {
            for (const v of this.list) {
              if (v.id === this.dataForm.id) {
                const index = this.list.indexOf(v);
                this.dataForm.checkedState = 2
                this.list.splice(index, 1, this.dataForm);
                break;
              }
            }
            this.rejectedVisible = false
            this.$notify.success({
              title: '成功',
              message: response.data.data
            })
          })
          .catch(() => {
            this.$notify.error({
              title: '失败',
              message: '取消失败'
            })
          });
      }else{
        this.$notify.error({
              title: '失败',
              message: '驳回原因不能为空'
            })
      }

    },
    closediv() {
      this.fixedstatus = 0 //灰色背景
      this.divconfirm = 0 //中间内容
    },
    //预览
    closedivlook() {
      this.fixedstatuslook = 0 //灰色背景
      this.divconfirmlook = 0 //中间内容
    },
    //选择时间
    selectdate() {
      console.log("选择延长时间");
      console.log(this.selectradioVal);
    },
    //提交时间
    dateconfirm() {
      console.log("选择延长时间");
      console.log(this.selectradioVal);
      console.log(this.itemvalue);
      var dateconfirmjson = {}
      dateconfirmjson.id = this.itemvalue.id
      dateconfirmjson.beginTime = this.itemvalue.beginTime
      dateconfirmjson.endTime = this.itemvalue.endTime + (this.selectradioVal * 1000 * 60)
      dateconfirmjson.attendances = this.itemvalue.attendances
      dateconfirmjson.memo = this.itemvalue.memo
      dateconfirmjson.roomId = this.itemvalue.roomId
      dateconfirmjson.speaker = this.itemvalue.speaker
      dateconfirmjson.subject = this.itemvalue.subject
      Meetingupdate(dateconfirmjson)
        .then(() => {
          this.$notify.success({
            title: '成功',
            message: '更新成功'
          })
          this.closediv();
          this.getList();
        })
        .catch((err) => {
          this.$notify.error({
            title: '失败',
            message: err.data.data
          })
        });
    },
    audit(row) {
      this.$confirm("是否确定", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.dataForm = Object.assign({}, row);
        statusUpdate({
          meetingId: this.dataForm.id,
          type: 1,
        })
          .then(() => {
            for (const v of this.list) {
              if (v.id === this.dataForm.id) {
                const index = this.list.indexOf(v);
                this.dataForm.checkedState = 1
                this.list.splice(index, 1, this.dataForm);
                break;
              }
            }
            this.$notify.success({
              title: "成功",
              message: "确认成功",
            });
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.data,
            });
          });
      }).catch(() => { });
    },
    //预览
    look(item){

      this.fixedstatuslook = 1 //灰色背景
      this.divconfirmlook = 1  //中间内容
      let begin = moment(item.beginTime).format("YYYY-MM-DD HH:mm")
      let end = moment(item.endTime).format("HH:mm")
      item.time = begin + '~' + end
      for(var i in item.attendances){
        item.attendances[i].signTime = moment(item.attendances[i].signTime).format("YYYY-MM-DD HH:mm")
      }
      console.log("预览")
      console.log(item)
      this.itemvaluelook = item
    },
    //修改
    modify(item) {
      this.fixedstatus = 1 //灰色背景
      this.divconfirm = 1  //中间内容
      let begin = moment(item.beginTime).format("YYYY-MM-DD HH:mm")
      let end = moment(item.endTime).format("HH:mm")
      item.time = begin + '~' + end
      this.itemvalue = item
    },
    indexMethod(index) {
      index = index + 1
      return index
    },
  },
};
</script>
